<article class="module-account module-account-lockplan">
    <div class="ui-account-box">

        <h3 class="ui-title">{{$t('lockPlan.lockPlan')}}</h3>

        <div class="ui-account-box-inner">
            <div class="basic-info-box ">
                <div class="box-left">
                    <div class="tr">
                        <div class="td">{{ $t('lockPlan.lastMonthAmount') }}</div>
                        <div class="td">
                            <loading type="inline" v-if="isLoading === true"></loading>
                            <template v-else>{{lastRewardAmount}}{{coinTypeText}}</template>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="td">{{ $t('lockPlan.totalAmount') }}</div>
                        <div class="td">
                            <loading type="inline" v-if="isLoading === true"></loading>
                            <template v-else>{{totalRewardAmount}}{{coinTypeText}}</template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="basic-info-box box-content">
                <div class="box-left">
                    <div class="tr">
                        <div class="td">{{ $t('lockPlan.lockable') }}</div>
                        <div class="td">
                            <loading type="inline" v-if="isLoading === true"></loading>
                            <template v-else>{{amount}}{{coinTypeText}}</template>
                        </div>
                        <div class="td-gray">
                            <loading type="inline" v-if="isLoading === true"></loading>
                            <template v-ele>{{ $$moment(beginDate).format('YYYY-MM-DD')}} {{ $t('lockPlan.to') }} {{$$moment(endDate).format('YYYY-MM-DD')}}</template>
                        </div>
                        <!--<div class="td-operation" v-if="isCanLock === true">-->
                            <!--<a href="javascript:;">&nbsp;</a>-->
                            <!--<a href="javascript:;" @click="showLockDialog()">{{ $t('lockPlan.lock') }}</a>-->
                        <!--</div>-->
                        <!--<div class="td-operation" v-if="isCanLock === false">-->
                            <!--<a href="javascript:;">&nbsp;</a>-->
                            <!--<span class="gray">{{ $t('lockPlan.lock') }}</span>-->
                        <!--</div>-->
                    </div>
                    <div class="tr">
                        <div class="td">{{ $t('lockPlan.locked') }}</div>
                        <div class="td">
                            <loading type="inline" v-if="isLoading === true"></loading>
                            <template v-else>{{lockAmount}}{{coinTypeText}}</template>
                        </div>
                        <div class="td-gray">
                            <loading type="inline" v-if="isLoading === true"></loading>
                            <template v-else>{{ $t('lockPlan.allTime') }}</template>
                        </div>
                        <div class="td-operation" v-if="isCanUnlock === true">
                            <a href="javascript:;">&nbsp;</a>
                            <a href="javascript:;" @click="showUnlockDialog()">{{ $t('lockPlan.unlock') }}</a>
                        </div>
                        <div class="td-operation" v-if="isCanUnlock === false">
                            <a href="javascript:;">&nbsp;</a>
                            <span class="gray">{{ $t('lockPlan.unlock') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui-account-box-inner">
            <div class="ui-title-account">
                <span class="strong">{{$t('lockPlan.operationRecord')}}</span>
                <span class="icon" @click="fetchLockList"><i class="icon-reload"></i></span>
            </div>
            <div class="box-content">
                <div class="table-wrap">
                    <div class="m-table">
                        <table>
                            <thead>
                            <tr>
                                <th width="30%">{{ $t('lockPlan.time') }}</th>
                                <th class="fn-ta-right" width="30%">{{ $t('lockPlan.lockSum')}}</th>
                                <th class="fn-ta-right" width="40%">{{ $t('lockPlan.status')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in lockList" v-if="isLockListLoading === false && lockList.length > 0">
                                <td>{{item.createDate | timezone}}</td>
                                <td class="fn-ta-right">{{filter.floorFix(item.lockAmount, precision)}}{{coinTypeText}}</td>
                                <td class="fn-ta-right" :class="item.status === 'LOCK'? 'fn-color-buy': ''" >{{$t('lockPlan.lockStatus.'+item.status)}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <loading v-if="isLockListLoading"></loading>
                        <no-data v-if="isLockListLoading === false && lockList && lockList.length === 0"></no-data>
                    </div>
                    <pager :page-no="condition.pageNo"
                           :page-size="condition.pageSize"
                           :on-page-change="changePage"
                           :page-num="condition.pageNum"></pager>
                </div>
            </div>
        </div>

        <div class="ui-account-box-inner">
            <h3 class="ui-title">{{$t('lockPlan.lockExplain')}}</h3>
            <div class="basic-info-box explan">
                <p>{{ $t('lockPlan.lockRuleExplan.a') }}</p>
                <p>{{ $t('lockPlan.lockRuleExplan.b') }}</p>
                <p>{{ $t('lockPlan.lockRuleExplan.c') }}</p>
                <p>{{ $t('lockPlan.lockRuleExplan.d') }}</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('lockPlan.lockRuleExplan.e') }}</p>
                <p>{{ $t('lockPlan.lockRuleExplan.f') }}</p>
            </div>
        </div>
    </div>
    <template class="conponent">
        <set-pay-pwd v-if="isShowSetPayPwd"  
                    :onBindingSuccess="setPayPwdSuccess"
                    v-on:hide="isShowSetPayPwd = false">
        </set-pay-pwd>
        <lock-dialog v-if="isShowLockDialog"  
                    :onBindingSuccess="lockSuccess"
                    :amountAvailable="amount"
                    :coinTypeText="coinTypeText"
                    v-on:hide="isShowLockDialog = false">
        </lock-dialog>
        <unlock-dialog v-if="isShowUnlockDialog"  
                    :onBindingSuccess="unlockSuccess"
                    :locked="lockAmount"
                    :coinTypeText="coinTypeText"
                    v-on:hide="isShowUnlockDialog = false">
        </unlock-dialog>
    </template>
</article>